<template>
  <div class="monitor-panel">
    <div class="card card-top">
      <!-- 上部分内容 -->
      <slot name="top">监控图像</slot>
    </div>
    <div class="card card-bottom">
      <!-- 下部分内容 -->
      <slot name="bottom">底部监控信息区</slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MonitorPanel',
})
</script>

<style scoped>
.monitor-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 8px 0;
  padding: 16px;
  box-sizing: border-box;
}
.card-top {
  flex: 8 1 0%;
  min-height: 0;
}
.card-bottom {
  flex: 2 1 0%;
  min-height: 0;
}
</style>
